<script setup>
import { ref } from 'vue'
import { popularizeGetListRandomService } from '@/api/popularize'

const dataList = ref([])

const getPopularizeList = async () => {
  const res = await popularizeGetListRandomService()
  dataList.value = res.data.data
}

getPopularizeList()
</script>

<template>
  <div>
    <zlcode-h4>推荐：</zlcode-h4>
    <null-box size="20"></null-box>
    <el-row style="justify-content: space-between">
      <a-popover v-for="item in dataList" :key="item">
        <el-card
          shadow="never"
          style="
            width: 230px;
            border-radius: 10px;
            margin: 0 50px;
            padding: 15px 0;
          "
        >
          <el-row style="justify-content: center">
            <a-avatar
              :image-url="item.imgPath"
              style="width: 50px; height: 50px"
            ></a-avatar>
          </el-row>
          <null-box size="15"></null-box>
          <el-row style="justify-content: center">
            <el-text style="font-size: 18px">{{ item.title }}</el-text>
          </el-row>
          <null-box size="15"></null-box>
          <el-row>
            <el-text
              type="info"
              style="text-align: center; font-size: 13px; line-height: 20px"
              >{{ item.content }}</el-text
            >
          </el-row>
        </el-card>
        <template #content>
          <el-text tag="p">{{ item.codeContent }}</el-text>
          <a-avatar
            :image-url="item.codeImg"
            :size="64"
            shape="square"
          ></a-avatar>
        </template>
      </a-popover>
    </el-row>
  </div>
</template>
<style scoped></style>
